.sidebar-item {
  list-style-type: none;
  border-radius: 6px;
  width: 100%;
  cursor: default;
  user-select: none;
  background-color: transparent;
  border-style: solid;
  border-color: transparent;
  transition: all var(--hover-duration);

  --gutter-space: 0.33em 0.66em;
  --selected-bg: var(--primary-color);
  --selected-color: white;
  --selected-shadow: var(--shadow-s);
  --selected-border: var(--primary-color-dark);
}

.sidebar-item:hover,
.sidebar-item:active {
  background-color: var(--emphasis-bg-less);
}

.sidebar-item:active {
  transform: scale(0.995);
}

.sidebar-item[aria-selected="true"] {
  box-shadow: var(--selected-shadow);
  background: var(--selected-bg);
  color: var(--selected-color);
  border-color: var(--selected-border);
}

.white-selection {
  --selected-bg: white;
  --selected-color: var(--fg-color);
  --selected-border: transparent;
}
